<template>
	<view class="container">
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<view class="tui-set-box">
			
			
			
			<tui-list-cell padding="0" :lineLeft="0">
				<view class="tui-list-cell tui-info-box">
					<image :src="myImgLogo" class="tui-avatar"></image>
					<view>{{myName}}</view>
					<view>{{myPhone}}</view>
				</view>
			</tui-list-cell>
			
			<view class="tui-mtop">
				<tui-list-cell padding="0" :lineLeft="0" :arrow="myPhone ? false : true" @click="goMyBindPhone()">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">手机号码</view>
						<view class="tui-list-cell-val">{{myPhone}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="0" :arrow="false">
					<view class="tui-list-cell">
						<view class="tui-list-cell-key">我的邀请码</view>
						<view class="tui-list-cell-val">{{myInfo.invite_code}}</view>
						<view class="tui-list-cell-end"><tui-tag size="small" type="light-green" shape="circle" @click="copyText(myInfo.invite_code)">点击复制</tui-tag></view>
					</view>
				</tui-list-cell>
			
			</view>
			
			<view class="tui-mtop">
				
				<image :src="img_url" class="poster-img"></image>
				
			</view>
			
			<view class="tui-edit">
				<tui-button type="primary" width="500rpx" height="80rpx" :size="30">长按图片保存分享给好友</tui-button>
			</view>

			
		</view>
	</view>
</template>

<script>
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	export default {
		components: {
			tuiListCell,
			tuiButton,
			footerMenu,
			tuiIcon,
			tuiTag
		},
		
		data() {
			return {
				myId: 0,
				myName: '',
				myPhone: '',
				myImgLogo: '',
				myInfo: [],
				
				img_url: '',
				invite_code: '',
				
				//底部导航栏tabbar
				tabCur: 2,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
						{icon: "service", text: "发现", size: 24},
						{icon: "people", text: "我的", size: 24}],
			}
		},
		
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else if (index == 1) {
					uni.switchTab({ url: '/pages/shop/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			
			
			//复制文字
			copyText(inviteCode) {
				let that = this;
				uni.setClipboardData({
					data: inviteCode,
					success: function () {
						that.tui.toast('邀请码复制成功', 2000, false);
					}
				});
			},
			
			goMyAddressIndex: function(){
				uni.navigateTo({
					url: '/pages/my-address/index'
				});
			},
			
			goMyBaseEdit: function(){
				uni.navigateTo({
					url: '/pages/my/base-edit'
				});
			},
			
			goMyBindPhone: function(){
				if(this.myPhone) {
					this.tui.toast('你的手机号码已绑定');
					return;
				}
				uni.navigateTo({
					url: '/pages/my/bind-phone'
				});
			},
			
			goMyBindEmail: function(){
				if(this.myEmail) {
					this.tui.toast('你的电子邮箱已绑定');
					return;
				}
				uni.navigateTo({
					url: '/pages/my/bind-email'
				});
			},
			
			goMyBindSubPhone: function(){
				if(!this.canBindSubPhone) {
					this.tui.toast('该功能暂未开通');
					return;
				}
				uni.navigateTo({
					url: '/pages/my/bind-sub-phone'
				});
			},
			
			goMySubPhoneList: function(){
				uni.navigateTo({
					url: '/pages/my/bind-sub-list'
				});
			},
			
			goPayWxOrder: function(){
				uni.navigateTo({
					url: '/pages/pay/wx-order'
				});
			},
			
			
			getMyBaseInfo: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
				    success: (res) => {
						let resData = res.data['data'];
						this.myInfo = resData;
						this.myId = resData.id;
						this.myName = resData.name;
						this.myPhone = resData.phone;
						this.myImgLogo = resData.img_logo;
					}
				});
			},
			
			getInviteImg: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/user/getInviteImg',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
				    success: (res) => {
						let resData = res.data['data'];
						this.img_url = resData.img_url;
						this.invite_code = resData.invite_code;
					}
				});
			},
			
		},
		
		onLoad: function(options) {
			this.getMyBaseInfo();
			this.getInviteImg();
		},
	}
</script>

<style>
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 30rpx;
	}
	
	.tui-list-cell-key {
		width: 200rpx;
	}
	
	.tui-list-cell-val {
		color: #00CC99;
	}

	.tui-info-box {
		font-size: 34rpx;
	}

	.tui-avatar {
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}
	
	.tui-edit {
		margin-top: 50rpx;
		padding: 100rpx 100rpx;
		margin-bottom: 100rpx;
	}

	.tui-exit {
		margin-top: 200rpx;
		padding: 100rpx 200rpx;
	}
	
	.tui-right{
		margin-left: auto !important;
		margin-right: 26rpx !important;
		font-size: 26rpx;
		line-height: 26rpx;
		color: #999;
	}
	
	.tui-list-cell-end{
		position: relative;
		right: 0;
		margin-left: 200rpx;
	}
	
	.poster-img{
		width: 750rpx;
		height: 1333rpx;
	}
</style>